<template>
  <div class="love-wall-container">
    <!-- 顶部导航 -->
    <div class="wall-header">
      <h1>校园表白墙</h1>
      <div class="tab-buttons">
        <el-button 
          v-for="tab in tabs" 
          :key="tab.value" 
          :type="activeTab === tab.value ? 'primary' : ''"
          @click="activeTab = tab.value"
        >
          {{ tab.label }}
        </el-button>
      </div>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">

        <el-select v-model="sortType" placeholder="排序方式" @change="sortPosts" width="150px" class="sort-select">
          <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        
        <el-select v-model="distanceFilter" placeholder="距离筛选" clearable @change="filterPosts" class="sort-select"  width="150px">
          <el-option
            v-for="item in distanceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="filterByDate"
        />

    </div>

    <!-- 发布表单 -->
    <div class="post-form">
      <el-form :model="form" label-width="80px">
        <el-form-item label="内容类型">
          <el-radio-group v-model="form.type">
            <el-radio-button v-for="tab in tabs" :key="tab.value" :label="tab.value">
              {{ tab.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="发布内容">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="4"
            placeholder="写下你想说的话..."
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="上传图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="3"
            :file-list="form.images"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="匿名发布">
          <el-switch v-model="form.isAnonymous" />
          <span class="hint-text" v-if="form.isAnonymous">(其他人将看不到你的信息)</span>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitPost">发布</el-button>
          <el-button @click="resetForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 内容展示区 -->
    <div class="posts-container">
      <el-empty v-if="filteredPosts.length === 0" description="暂无相关内容" />
      
      <div v-for="post in filteredPosts" :key="post.id" class="post-item">
        <div class="post-header">
          <el-avatar :src="post.isAnonymous ? anonymousAvatar : post.avatar" size="small" />
          <div class="post-user">
            <span class="username">{{ post.isAnonymous ? '匿名用户' : post.username }}</span>
            <span class="post-time">{{ formatTime(post.createTime) }}</span>
            <span class="post-distance" v-if="post.distance">
              <el-icon><Location /></el-icon>
              {{ post.distance }}km
            </span>
          </div>
          <el-tag :type="getTagType(post.type)" size="small" effect="plain">
            {{ getTypeLabel(post.type) }}
          </el-tag>
        </div>
        
        <div class="post-content">
          <p>{{ post.content }}</p>
          <div v-if="post.images && post.images.length" class="post-images">
            <el-image
              v-for="(img, index) in post.images"
              :key="index"
              :src="img"
              fit="cover"
              class="post-image"
              :preview-src-list="post.images"
              :initial-index="index"
            />
          </div>
        </div>
        
        <div class="post-stats">
          <span class="stat-item">
            <el-icon><View /></el-icon>
            {{ post.views }}
          </span>
          <span class="stat-item">
            <el-icon><Star /></el-icon>
            {{ post.favorites }}
          </span>
        </div>
        
        <div class="post-actions">
          <span class="action-item" @click="toggleLike(post)">
            <el-icon :color="post.isLiked ? '#f56c6c' : '#999'">
              <Goods />
            </el-icon>
            {{ post.likes }}
          </span>
          <span class="action-item" @click="toggleComment(post)">
            <el-icon><ChatDotRound /></el-icon>
            {{ post.comments.length }}
          </span>
          <span class="action-item" @click="sharePost(post)">
            <el-icon><Share /></el-icon>
            分享
          </span>
        </div>
        
        <!-- 评论区 -->
        <div v-if="post.showComments" class="comment-section">
          <div class="comment-input">
            <el-input
              v-model="post.newComment"
              placeholder="写下你的评论..."
              size="small"
              @keyup.enter="submitComment(post)"
            >
              <template #append>
                <el-button @click="submitComment(post)">发送</el-button>
              </template>
            </el-input>
          </div>
          
          <div class="comment-list">
            <div v-for="comment in post.comments" :key="comment.id" class="comment-item">
              <el-avatar :src="comment.avatar" size="small" />
              <div class="comment-content">
                <div class="comment-header">
                  <span class="username">{{ comment.username }}</span>
                  <span class="time">{{ formatTime(comment.createTime) }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPosts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { 
  Plus,
  Goods,
  ChatDotRound,
  Share,
  Location,
  View,
  Star
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

// 匿名用户头像
const anonymousAvatar = 'https://agoni-web.oss-cn-beijing.aliyuncs.com/anonymous.png'

// 标签类型
const tabs = [
  { label: '好句分享', value: 'quote' },
  { label: '吃瓜分享', value: 'gossip' },
  { label: '找搭子', value: 'partner' },
  { label: '表白祝福', value: 'love' }
]

// 排序选项
const sortOptions = [
  { label: '按热度排序', value: 'hot' },
  { label: '按时间排序', value: 'time' },
  { label: '按距离排序', value: 'distance' }
]

// 距离筛选选项
const distanceOptions = [
  { label: '1公里内', value: 1 },
  { label: '3公里内', value: 3 },
  { label: '5公里内', value: 5 },
  { label: '10公里内', value: 10 }
]

const activeTab = ref('all')
const sortType = ref('hot')
const distanceFilter = ref(null)
const dateRange = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalPosts = ref(0)

// 表单数据
const form = ref({
  type: 'love',
  content: '',
  images: [],
  isAnonymous: false
})

// 图片预览相关
const dialogVisible = ref(false)
const dialogImageUrl = ref('')

// 模拟用户当前位置
const userLocation = ref({
  latitude: 39.9042,
  longitude: 116.4074
})

// 计算距离函数
const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number) => {
  const R = 6371 // 地球半径，单位km
  const dLat = (lat2 - lat1) * Math.PI / 180
  const dLon = (lon2 - lon1) * Math.PI / 180
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
  return (R * c).toFixed(1)
}

// 模拟数据
const allPosts = ref([
  {
    id: 1,
    type: 'love',
    content: '今天在图书馆看到一位穿白色连衣裙的女生，你在看《百年孤独》，我在看《小王子》，不知道有没有机会认识你~',
    images: [
      'https://agoni-web.oss-cn-beijing.aliyuncs.com/love1.jpg',
      'https://agoni-web.oss-cn-beijing.aliyuncs.com/love2.jpg'
    ],
    username: '小王子',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar1.jpg',
    createTime: '2023-06-15 14:30:00',
    likes: 24,
    isLiked: false,
    views: 356,
    favorites: 12,
    location: {
      latitude: 39.9035,
      longitude: 116.4018
    },
    distance: 0,
    hotScore: 85,
    comments: [
      {
        id: 101,
        username: '热心同学',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar2.jpg',
        content: '祝福你们！',
        createTime: '2023-06-15 15:12:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 2,
    type: 'quote',
    content: '分享一句最近很喜欢的话："愿你一生温暖纯良，不舍爱与自由"',
    images: [],
    username: '文艺青年',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar3.jpg',
    createTime: '2023-06-14 09:15:00',
    likes: 56,
    isLiked: true,
    views: 289,
    favorites: 45,
    location: {
      latitude: 39.9028,
      longitude: 116.4032
    },
    distance: 0,
    hotScore: 92,
    comments: [],
    showComments: false,
    newComment: ''
  },
  {
    id: 3,
    type: 'gossip',
    content: '听说食堂三楼新开的奶茶店很不错，有人去尝过吗？',
    images: [
      'https://agoni-web.oss-cn-beijing.aliyuncs.com/gossip1.jpg'
    ],
    username: '匿名用户',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar4.jpg',
    isAnonymous: true,
    createTime: '2023-06-13 18:45:00',
    likes: 12,
    isLiked: false,
    views: 178,
    favorites: 8,
    location: {
      latitude: 39.9051,
      longitude: 116.4087
    },
    distance: 0,
    hotScore: 67,
    comments: [
      {
        id: 301,
        username: '奶茶爱好者',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar5.jpg',
        content: '去过了，珍珠奶茶很不错！',
        createTime: '2023-06-13 19:30:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 4,
    type: 'partner',
    content: '寻找一起考研的搭子，目标计算机专业，希望可以互相监督学习！',
    images: [],
    username: '考研人',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar6.jpg',
    createTime: '2023-06-12 10:20:00',
    likes: 8,
    isLiked: false,
    views: 145,
    favorites: 10,
    location: {
      latitude: 39.9075,
      longitude: 116.4112
    },
    distance: 0,
    hotScore: 58,
    comments: [
      {
        id: 401,
        username: '同路人',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar7.jpg',
        content: '我也是考计算机的，可以一起！',
        createTime: '2023-06-12 11:05:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 5,
    type: 'love',
    content: '感谢昨天在篮球场帮我捡球的同学，你的笑容很温暖~',
    images: [
      'https://agoni-web.oss-cn-beijing.aliyuncs.com/love3.jpg'
    ],
    username: '篮球少年',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar8.jpg',
    createTime: '2023-06-11 16:30:00',
    likes: 18,
    isLiked: false,
    views: 210,
    favorites: 15,
    location: {
      latitude: 39.9082,
      longitude: 116.4095
    },
    distance: 0,
    hotScore: 72,
    comments: [],
    showComments: false,
    newComment: ''
  },
  {
    id: 6,
    type: 'quote',
    content: '村上春树说："不必太纠结于当下，也不必太忧虑未来，当你经历过一些事情的时候，眼前的风景已经和从前不一样了。"',
    images: [],
    username: '书虫',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar9.jpg',
    createTime: '2023-06-10 08:45:00',
    likes: 32,
    isLiked: false,
    views: 267,
    favorites: 28,
    location: {
      latitude: 39.9015,
      longitude: 116.4058
    },
    distance: 0,
    hotScore: 81,
    comments: [
      {
        id: 601,
        username: '文学爱好者',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar10.jpg',
        content: '很喜欢这句话，感谢分享！',
        createTime: '2023-06-10 10:20:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 7,
    type: 'gossip',
    content: '听说下个月学校要举办校园歌手大赛，有报名参加的吗？',
    images: [
      'https://agoni-web.oss-cn-beijing.aliyuncs.com/gossip2.jpg'
    ],
    username: '音乐迷',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar11.jpg',
    createTime: '2023-06-09 19:15:00',
    likes: 15,
    isLiked: false,
    views: 198,
    favorites: 9,
    location: {
      latitude: 39.9067,
      longitude: 116.4123
    },
    distance: 0,
    hotScore: 63,
    comments: [
      {
        id: 701,
        username: '歌唱达人',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar12.jpg',
        content: '我已经报名了，期待和大家交流！',
        createTime: '2023-06-09 20:30:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 8,
    type: 'partner',
    content: '寻找一起晨跑的伙伴，每天早上6:30操场见！',
    images: [],
    username: '跑步爱好者',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar13.jpg',
    createTime: '2023-06-08 07:20:00',
    likes: 10,
    isLiked: false,
    views: 156,
    favorites: 7,
    location: {
      latitude: 39.9039,
      longitude: 116.4067
    },
    distance: 0,
    hotScore: 55,
    comments: [
      {
        id: 801,
        username: '晨跑者',
        avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar14.jpg',
        content: '我可以参加，明天见！',
        createTime: '2023-06-08 08:15:00'
      }
    ],
    showComments: false,
    newComment: ''
  },
  {
    id: 9,
    type: 'love',
    content: '感谢昨天在图书馆借我笔的同学，你的字写得很漂亮~',
    images: [],
    username: '匿名用户',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar15.jpg',
    isAnonymous: true,
    createTime: '2023-06-07 14:45:00',
    likes: 22,
    isLiked: false,
    views: 245,
    favorites: 18,
    location: {
      latitude: 39.9045,
      longitude: 116.4021
    },
    distance: 0,
    hotScore: 78,
    comments: [],
    showComments: false,
    newComment: ''
  },
  {
    id: 10,
    type: 'quote',
    content: '海明威说："世界是个美好的地方，值得为之奋斗。"',
    images: [],
    username: '文学青年',
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar16.jpg',
    createTime: '2023-06-06 11:30:00',
    likes: 28,
    isLiked: false,
    views: 223,
    favorites: 22,
    location: {
      latitude: 39.9021,
      longitude: 116.4045
    },
    distance: 0,
    hotScore: 75,
    comments: [],
    showComments: false,
    newComment: ''
  }
])

// 计算距离
const calculateAllDistances = () => {
  allPosts.value.forEach(post => {
    post.distance = calculateDistance(
      userLocation.value.latitude,
      userLocation.value.longitude,
      post.location.latitude,
      post.location.longitude
    )
  })
}

// 初始化
onMounted(() => {
  calculateAllDistances()
  totalPosts.value = allPosts.value.length
})

// 过滤帖子
const filteredPosts = computed(() => {
  let result = [...allPosts.value]
  
  // 按类型过滤
  if (activeTab.value !== 'all') {
    result = result.filter(post => post.type === activeTab.value)
  }
  
  // 按距离过滤
  if (distanceFilter.value) {
    result = result.filter(post => parseFloat(post.distance) <= distanceFilter.value)
  }
  
  // 按日期过滤
  if (dateRange.value && dateRange.value.length === 2) {
    const [start, end] = dateRange.value
    result = result.filter(post => {
      const postDate = dayjs(post.createTime)
      return postDate.isAfter(start) && postDate.isBefore(end)
    })
  }
  
  // 排序
  if (sortType.value === 'hot') {
    result.sort((a, b) => b.hotScore - a.hotScore)
  } else if (sortType.value === 'time') {
    result.sort((a, b) => dayjs(b.createTime).valueOf() - dayjs(a.createTime).valueOf())
  } else if (sortType.value === 'distance') {
    result.sort((a, b) => parseFloat(a.distance) - parseFloat(b.distance))
  }
  
  // 分页
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})

// 格式化时间
const formatTime = (timeStr: string) => {
  return dayjs(timeStr).format('MM-DD HH:mm')
}

// 获取标签类型
const getTagType = (type: string) => {
  const types: Record<string, string> = {
    quote: 'success',
    gossip: 'warning',
    partner: 'info',
    love: 'danger'
  }
  return types[type] || ''
}

// 获取类型标签
const getTypeLabel = (type: string) => {
  const tab = tabs.find(t => t.value === type)
  return tab ? tab.label : ''
}

// 图片上传处理
const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

const handleRemove = (file: any, fileList: any[]) => {
  form.value.images = fileList
}

// 排序帖子
const sortPosts = () => {
  currentPage.value = 1
}

// 筛选帖子
const filterPosts = () => {
  currentPage.value = 1
}

// 按日期筛选
const filterByDate = () => {
  currentPage.value = 1
}

// 点赞功能
const toggleLike = (post: any) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
  // 更新热度分数
  post.hotScore = calculateHotScore(post)
}

// 计算热度分数
const calculateHotScore = (post: any) => {
  // 热度计算公式：点赞*2 + 浏览*0.5 + 收藏*1.5 + 评论数*1.2
  return post.likes * 2 + post.views * 0.5 + post.favorites * 1.5 + post.comments.length * 1.2
}

// 评论功能
const toggleComment = (post: any) => {
  post.showComments = !post.showComments
}

const submitComment = (post: any) => {
  if (!post.newComment.trim()) return
  
  const newComment = {
    id: Date.now(),
    username: '当前用户', // 实际项目中替换为真实用户信息
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar8.jpg',
    content: post.newComment,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  
  post.comments.unshift(newComment)
  post.newComment = ''
  // 更新热度分数
  post.hotScore = calculateHotScore(post)
}

// 分享功能
const sharePost = (post: any) => {
  console.log('分享帖子:', post.id)
  // 实际项目中可以调用分享API
  post.views += 1
  // 更新热度分数
  post.hotScore = calculateHotScore(post)
}

// 发布帖子
const submitPost = () => {
  if (!form.value.content.trim()) {
    ElMessage.warning('请填写内容')
    return
  }
  
  // 计算距离
  const distance = calculateDistance(
    userLocation.value.latitude,
    userLocation.value.longitude,
    userLocation.value.latitude + (Math.random() * 0.01 - 0.005),
    userLocation.value.longitude + (Math.random() * 0.01 - 0.005)
  )
  
  const newPost = {
    id: Date.now(),
    type: form.value.type,
    content: form.value.content,
    images: form.value.images.map((img: any) => img.url),
    username: '当前用户', // 实际项目中替换为真实用户信息
    avatar: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/avatar8.jpg',
    isAnonymous: form.value.isAnonymous,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    likes: 0,
    isLiked: false,
    views: 0,
    favorites: 0,
    location: {
      latitude: userLocation.value.latitude + (Math.random() * 0.01 - 0.005),
      longitude: userLocation.value.longitude + (Math.random() * 0.01 - 0.005)
    },
    distance: distance,
    hotScore: 50,
    comments: [],
    showComments: false,
    newComment: ''
  }
  
  allPosts.value.unshift(newPost)
  totalPosts.value = allPosts.value.length
  resetForm()
  ElMessage.success('发布成功')
}

// 重置表单
const resetForm = () => {
  form.value = {
    type: 'love',
    content: '',
    images: [],
    isAnonymous: false
  }
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.love-wall-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.wall-header {
  text-align: center;
  margin-bottom: 30px;
  
  h1 {
    font-size: 28px;
    color: #f56c6c;
    margin-bottom: 15px;
  }
}

.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-toolbar {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  justify-content: center;

}


.post-form {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .hint-text {
    margin-left: 10px;
    font-size: 12px;
    color: #999;
  }
}

.posts-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  
  .post-user {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .username {
      font-weight: 500;
      color: #333;
    }
    
    .post-time {
      font-size: 12px;
      color: #999;
    }
    
    .post-distance {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 3px;
      margin-top: 2px;
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
  
  .el-tag {
    margin-left: auto;
  }
}

.post-content {
  margin-bottom: 15px;
  
  p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 10px;
  }
}

.post-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 3px;
    
    .el-icon {
      font-size: 14px;
    }
  }
}

.post-images {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
  
  .post-image {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s;
    
    &:hover {
      transform: scale(1.05);
    }
  }
}

.post-actions {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  
  .action-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
    
    &:hover {
      color: var(--el-color-primary);
    }
    
    .el-icon {
      font-size: 16px;
    }
  }
}

.comment-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
  
  .comment-input {
    margin-bottom: 15px;
  }
  
  .comment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .comment-item {
    display: flex;
    gap: 10px;
    
    .comment-content {
      flex: 1;
      
      .comment-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        
        .username {
          font-weight: 500;
          font-size: 14px;
          color: #333;
        }
        
        .time {
          font-size: 12px;
          color: #999;
        }
      }
      
      .comment-text {
        font-size: 13px;
        color: #555;
        line-height: 1.6;
      }
    }
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.sort-select{
    margin-left: 10px;
    margin-right: 10px;
    width: 200px;
    font-size: 12px;
    color: #999;

}
@media (max-width: 768px) {
  .love-wall-container {
    padding: 15px;
  }
  
  .wall-header h1 {
    font-size: 24px;
  }
  
  .tab-buttons {
    flex-wrap: wrap;
  }
  
  .filter-toolbar {
    flex-direction: column;
    gap: 10px;
  }
  
  .post-form {
    padding: 15px;
  }
  
  .post-images {
    .post-image {
      width: 80px;
      height: 80px;
    }
  }
}
</style>